<template>
  <div class="m-5 p-5 bg-white">
    选择查询范围
    <el-date-picker type="date" placeholder="开始时间" /> ~
    <el-date-picker type="date" placeholder="结束时间" class="mr-5" />
    <el-button type="primary">查询</el-button>
    <el-button>重置</el-button>
    <el-button type="primary">选择导出</el-button>
    <el-button type="primary">全部导出</el-button>

    <el-table :data="tableData" class="mt-5">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column type="index" label="序" width="50" />
      <el-table-column sortable v-for="(item, index) in s2" :key="index" :prop="'name' + index" :label="item" />
    </el-table>
  </div>
</template>
<script setup>
const s2 = [
  '违章名称',
  '违章性质',
  '违章内容',
  '违章人',
  '违章时间',
  '累计违章次数',
  '违章分数',
  '发布人',
]
const tableData = []
for (let i = 0; i < 10; i++) {
  tableData.push({
    name0: "违章地点",
    name1: "紧急",
    name2: "超速、闯红灯，鸣笛",
    name3: "张三",
    name4: "2024-04-04 07:28:35",
    name5: i+1,
    name6: i % 2 ? 1 : 2,
    name7: "李四",
  })
}
</script>
<style lang="scss" scoped></style>
